<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .bubble {
            position: relative;
            padding: 20px;
            background-color: #f1f1f1;
            border-radius: 5px;
            margin: 10px;
        }

        .bubble:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -5px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color: #f1f1f1;
            border-bottom: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <!-- 初始历史消息气泡 -->
        <div class="bubble">
            <span>用户1: 这是第一条消息</span>
        </div>
        <div class="bubble">
            <span>用户2: 这是第二条消息</span>
        </div>
        <!-- 更多的消息气泡将在这里动态生成 -->
    </div>

    <script>
        // 假设我们从服务器获取新的消息，并添加到聊天容器中
        // 这里我们使用setTimeout来模拟异步操作
        setTimeout(function() {
            const newMessage = "用户1: 这是第三条消息";
            const newBubble = document.createElement('div');
            newBubble.className = 'bubble';
            const newSpan = document.createElement('span');
            newSpan.textContent = newMessage;
            newBubble.appendChild(newSpan);
            document.getElementById('chat-container').appendChild(newBubble);
        }, 2000); // 2秒后添加新的消息气泡
    </script>
</body>
</html>